<template>
	<view class="page">
		<view class="bar_info" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class="title_bar">
				<view class="title_bar_left" @tap.stop="isBack">
					<u-icon size="38" color="#000" name="arrow-left"></u-icon>
				</view>
				<view class="title_bar_center">
					<text>支付结果</text>
				</view>
				<view class="title_bar_right"></view>
			</view>
		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<view class="success_info">
			<view class="success_title">
				<view class="success_title_icon">
					<image src="./static/6.png" mode=""></image>
				</view>
				<view class="success_title_text">支付成功</view>
			</view>
			<view class="success_content">
				<view class="success_content_1">支付方式</view>
				<view class="success_content_2">微信支付</view>
			</view>
			<view class="success_content">
				<view class="success_content_1">支付时间</view>
				<view class="success_content_2">{{time}}</view>
			</view>
			<view class="back_btn" @tap.stop="isBacks">返回首页</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				time: ""
			}
		},
		onLoad() {
			this.time = this.getNowDate();
		},
		onShow() {

		},
		methods: {
			getNowDate() {
				var date = new Date();
				var sign2 = ":";
				var year = date.getFullYear() // 年
				var month = date.getMonth() + 1; // 月
				var day = date.getDate(); // 日
				var hour = date.getHours(); // 时
				var minutes = date.getMinutes(); // 分
				var seconds = date.getSeconds() //秒
				var weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
				var week = weekArr[date.getDay()];
				// 给一位数的数据前面加 “0”
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (day >= 0 && day <= 9) {
					day = "0" + day;
				}
				if (hour >= 0 && hour <= 9) {
					hour = "0" + hour;
				}
				if (minutes >= 0 && minutes <= 9) {
					minutes = "0" + minutes;
				}
				if (seconds >= 0 && seconds <= 9) {
					seconds = "0" + seconds;
				}
				return year + "-" + month + "-" + day + " " + hour + sign2 + minutes;
				// return year + "-" + month + "-" + day + " " + hour + sign2 + minutes + sign2 + seconds;
			},


			isBack() {
				uni.navigateBack();
			},
			isBacks() {
				uni.switchTab({
					url: '/pages/tabbar/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.page {
		background-color: #fff;

		.bar_info {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			// border-bottom: 1px solid #eee;
			background: #fff;
			z-index: 10;
			position: fixed;
			top: 0rpx;

			.title_bar {
				padding: 0 32rpx;
				display: flex;
				justify-content: space-between;

				.title_bar_left {
					width: 50rpx;
					display: flex;
					align-items: center;
				}

				.title_bar_center {
					line-height: 88rpx;
					font-size: 36rpx;
					font-weight: 400;
				}

				.title_bar_right {
					width: 50rpx;
				}
			}
		}

		.success_info {
			padding: 0 64rpx;

			.success_title {
				padding: 135rpx 0 49rpx;
				border-bottom: 1rpx solid #eee;

				.success_title_icon {
					width: 180rpx;
					height: 180rpx;
					margin: 0 auto;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.success_title_text {
					font-size: 36rpx;
					text-align: center;
					font-weight: 600;
				}
			}

			.success_content {
				padding: 36rpx 8rpx 0;
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				color: #666;

				.success_content_1 {}

				.success_content_2 {}
			}

			.back_btn {
				width: 610rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				background: #FFFFFF;
				border: 2rpx solid #0278FC;
				border-radius: 22rpx;
				color: #0278FC;
				font-size: 32rpx;
				position: fixed;
				left: 70rpx;
				bottom: 150rpx;
			}
		}
	}
</style>